<template>
  <div class="bg">
    <div class="common-header-logo">
      <img src="@/assets/logo.png" alt="logo" class="logo-img" />
      <div class="logo-text">
        <div class="logo-title">小白盒</div>
        <div class="logo-en">WhiteBox</div>
      </div>
    </div>
    <div class="login-box">
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="login-title-row">
          <span class="login-title">欢 迎 登 录</span>
          <button type="button" class="guest-btn" @click="guestEnter">游客进入</button>
        </div>
        <div class="input-group">
          <input type="text" v-model="form.username" placeholder="邮箱/手机号码" required />
        </div>
        <div class="input-group">
          <input type="password" v-model="form.password" placeholder="密码" required />
        </div>
        <button type="submit" class="login-btn">登录</button>
        <div class="register-link-row" style="justify-content: space-between;">
          <button type="button" class="register-link" @click="goToRegister">注册</button>
          <button type="button" class="register-link" @click="goToForgot">忘记密码？</button>
        </div>
      </form>
    </div>
    <div class="footer-desc">
      <div class="footer-title">小白盒</div>
      <div class="footer-sub">最受欢迎的中文社区</div>
      <div class="footer-en">White Box</div>
    </div>
    <div v-if="showToast" class="custom-toast">{{ toastMsg }}</div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { currentUser } from '../user';

const form = reactive({
  username: '',
  password: ''
});
const router = useRouter();

// 新增提示框相关
const toastMsg = ref('');
const showToast = ref(false);
const showToastMsg = (msg) => {
  toastMsg.value = msg;
  showToast.value = true;
  setTimeout(() => {
    showToast.value = false;
  }, 1000);
};

const handleLogin = async () => {
  if (!form.username || !form.password) {
    showToastMsg('请输入账号和密码');
    return;
  }
  // admin/admin123 直达后台
  if (form.username === 'admin' && form.password === 'admin123') {
    showToastMsg('管理员登录成功');
    setTimeout(() => {
      router.push('/admin');
    }, 500);
    return;
  }
  try {
    const response = await axios.post('/login_register/login',{
      account: form.username,
      password: form.password
    });
    if (response.data.success) {
      localStorage.setItem('user', JSON.stringify(response.data.data.user));
      localStorage.setItem('userId', response.data.data.user.id);
      showToastMsg('登录成功');
      setTimeout(() => {
        router.push('/mainpage');
      }, 1000);
    } else {
      showToastMsg(response.data.message);
    }
  } catch (error) {
    showToastMsg('发生错误，请重试');
  }
};

const goToRegister = () => {
  router.push('/register');
};

const goToForgot = () => {
  router.push('/forgot-password');
};

const guestEnter = () => {
  currentUser.id = 4;
  currentUser.nickname = '游客';
  currentUser.avatar = 'https://example.com/avatars/guest1.jpg';
  router.push('/mainpage');
};
</script>

<style>
.bg {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image: url("../assets/bg.png");
  background-size: cover;
}
.common-header-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  z-index: 100;
}
.logo-img {
  height: 40px;
  width: 40px;
  margin-right: 12px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.logo-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}
.logo-en {
  font-size: 12px;
  letter-spacing: 1px;
  color: #bbb;
}
.login-box {
  width: 300px;
  height: 320px;
  background-color: #ececec;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-left: 650px;
  padding: 30px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.login-title {
  font-weight: bold;
  font-size: 25px;
  color: #23272b;
}
.guest-btn {
  font-size: 14px;
  padding: 6px 14px;
  background: #23272b;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}
.guest-btn:hover {
  background: #43484d;
}
.input-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background: #fff;
  outline: none;
  transition: border 0.2s;
}
.input-group input:focus {
  border: 1.5px solid #23272b;
}
.login-btn {
  width: 100%;
  background: linear-gradient(180deg, #23272b 0%, #43484d 100%);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  font-size: 19px;
  padding: 10px 0;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
}
.login-btn:hover {
  filter: brightness(1.15);
}
.register-link-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
  gap: 6px;
}
.register-link {
  color: #fff;
  background: linear-gradient(180deg, #23272b 0%, #43484d 100%);
  border-radius: 8px;
  padding: 4px 18px;
  font-weight: bold;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.register-link:hover {
  background: linear-gradient(180deg, #43484d 0%, #23272b 100%);
}
.register-link-row span {
  color: #23272b;
  font-size: 16px;
}
.footer-desc {
  position: absolute;
  left: 32px;
  bottom: 130px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  z-index: 100;
}
.footer-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.footer-sub {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 6px;
}
.footer-en {
  font-size: 15px;
  color: #bbb;
}
.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 18px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none;
  animation: fadeInOut 1s;
}
@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}
</style>
